<template>
  <div class="setting_container">
    <!-- 导航头 -->
    <router-view />
    <!-- 设置界面 -->
    <div class="setting">
      <div class="item">
        <!-- 用户信息 -->
        <div class="userInfo center">
          <div class="avator center">
            <el-avatar :size="64" :src="img" />
            <div>
              <p class="id">{{ username }}</p>
              <!-- <p class="info">明媚安静</p> -->
            </div>
          </div>
          <div>
            <button class="logOut" @click="loginOutFn">
              <span>
                <i class="teana jw-exit-full" />
                登 出
              </span>
            </button>
          </div>
        </div>
        <!-- 设置项 -->
        <!-- 语言 -->
        <div class="center">
          <div class="left">{{ $t('settings.language') }}</div>
          <div class="right">
            <select v-model="language" @change="changeLanguage(language)">
              <option value="en">GB English</option>
              <option value="zh-CN">🇨🇳 简体中文</option>
              <!-- <option value="zh-TW">繁體中文</option> -->
            </select>
          </div>
        </div>
        <!-- 外观：日、夜 -->
        <div class="center">
          <div class="left">{{ $t('appearance.text') }}</div>
          <div class="right">
            <select>
              <option value="day">自动设置</option>
              <option value="day">白天</option>
              <option value="night">黑夜</option>
            </select>
          </div>
        </div>
        <!-- 音乐语种偏好 -->
        <div class="center">
          <div class="left">音乐语种偏好</div>
          <div class="right">
            <select>
              <option value="en">无偏好</option>
              <option value="tr">华语</option>
              <option value="zh-CN">欧美</option>
              <option value="zh-TW">日语</option>
              <option value="zh-TW">韩语</option>
            </select>
          </div>
        </div>
        <!-- 音质 -->
        <div class="title">
          <h3>音质</h3>
          <!-- 音质选择 -->
          <div class="center">
            <div class="left">音质选择</div>
            <div class="right">
              <select>
                <option value="zh-TW">无损 - FLAC</option>
                <option value="zh-CN">普通 - 128Kbps</option>
                <option value="zh-CN">较高 - 192Kbps</option>
                <option value="zh-CN">极高 - 320Kbps</option>
              </select>
            </div>
          </div>
        </div>
        <!-- 歌词 -->
        <div class="title">
          <h3>歌词</h3>
          <!-- 显示歌词翻译 -->
          <div class="center">
            <div class="left">{{ $t('showLyricsTranslation') }}</div>
            <div class="right eswitch">
              <el-switch v-model="tansModel" active-color="#335eea" inactive-color="#f5f5f7" />
            </div>
          </div>
          <!-- 音质选择 -->
          <div class="center">
            <div class="left">{{ $t('lyricFontSize.text') }}</div>
            <div class="right">
              <select>
                <option value="28">大(默认) - 28px</option>
                <option value="16">小 - 16px</option>
                <option value="22">中 - 22px</option>
                <option value="36">超大 - 36px</option>
              </select>
            </div>
          </div>
        </div>
        <!-- 第三方 -->
        <div class="title">
          <h3>第三方</h3>
          <!-- 音质选择 -->
          <div class="center">
            <div class="left">连接 Last.fm</div>
            <div class="right eswitch">
              <el-switch v-model="threeModel" active-color="#335eea" inactive-color="#f5f5f7" />
            </div>
          </div>
        </div>
        <!-- 其他 -->
        <div class="title">
          <h3>其他</h3>
          <!-- 音质选择 -->
          <div class="center">
            <div class="left">{{ $t('showPlaylistsByAppleMusic') }}</div>
            <div class="right eswitch">
              <el-switch v-model="showModel" active-color="#335eea" inactive-color="#f5f5f7" />
            </div>
          </div>
          <div class="center">
            <div class="left">{{ $t('subTitleDefault') }}</div>
            <div class="right eswitch">
              <el-switch v-model="nicknameModel" active-color="#335eea" inactive-color="#f5f5f7" />
            </div>
          </div>
          <div class="center">
            <div class="left">🏳️‍🌈 🐈️</div>
            <div class="right eswitch">
              <el-switch v-model="cuteModel" active-color="#335eea" inactive-color="#f5f5f7" @change="MoreCute" />
            </div>
          </div>
          <div class="footer">
            <!-- <p>MADE BY QIER222</p>
            <p>v0.4.2</p> -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Cookie from 'js-cookie'
// import { getUser } from '@/utils/auth.js'
import { getUserDetail } from '@/api/setting'
export default {
  name: 'SettingPage',
  data() {
    return {
      style: '自动设置',
      model: true,
      // toneQulity: '无损 - FLAC',
      language: '🇨🇳 简体中文',
      // fSize: '大(默认) - 28px',
      cuteModel: null, // 可爱进度条
      tansModel: null, // 歌词翻译
      threeModel: null, // 第三方
      showModel: null, // 显示歌单
      userInfo: this.$store.state.userInfo,
      nicknameModel: null, // 别名
      username: '',
      img:
        this.$store.state.img ||
        'https://s4.music.126.net/style/web2/img/default/default_avatar.jpg?param=60y60'
    }
  },
  async created() {
    // this.changeLanguage(Cookie.set('language'))
    this.language = Cookie.get('language')
    const { data } = await getUserDetail(this.userInfo.id)
    this.username = data.profile.nickname
  },
  methods: {
    // 登出事件
    loginOutFn() {
      this.$store.commit('removeCookie')
      this.$store.commit('removeUid')
      this.$store.commit('delUserInfo')
      this.$store.commit('removeImg')
      this.$router.push('/login')
    },
    // 语言切换
    changeLanguage(lang) {
      Cookie.set('language', lang)
      this.$i18n.locale = lang // 设置给本地的i18n插件
      this.$message('切换多语言成功！')
      console.log(this.language)
    },
    // cc() {
    //   // // flag做成vuex中的数据
    //   // if (this.styles === 'day') {
    //   //   (function() {
    //   //     import('@/style/night.less')
    //   //   })()
    //   // } else {
    //   //   (function() {
    //   //     import('@/style/day.less')
    //   //   })()
    //   // }
    //   this.
    // },
    // changQuality(){
    // }
    changeFontSize() {
      // 在浩哥歌词界面设置字体变量  这边去改
      // this.fSize
    },
    MoreCute() {
      // 开启进度条
    }
  }
}
</script>

<style lang="less" scoped>
.setting_container {
  padding: 64px 5vw 96px 5vw;
  .setting {
    display: flex;
    justify-content: center;

    .userInfo {
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;
      width: 720px;
      height: 96px;
      padding: 16px 10px;
      background-color: #f5f5f7;
      border-radius: 16px;
      margin-bottom: 48px;
      .avator {
        .el-avatar {
          margin-right: 25px;
        }
      }
      p.id {
        margin: 3px 0;
        font-size: 20px;
        font-weight: 700;
      }
      p.info {
        margin: 0;
        font-size: 13px;
      }
      .logOut {
        background-color: transparent;
        border: none;
        margin: 0 12px;
        box-sizing: border-box;
        color: #7a7a7b;
        span {
          padding: 8px 12px;
          font-size: 18px;
          font-weight: 600;
        }
        &:hover {
          opacity: 1;
          background: #eaeffd;
          color: #335eea;
        }
      }
    }
  }
  // 定义居中类
  .center {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 24px 0;
  }
  .left {
    font-size: 16px;
    font-weight: 500;
  }
  .right {
    min-width: 192px;
    height: 32px;
  }
  select {
    min-width: 192px;
    padding: auto;
    font-size: 14px;
    border: none;
    font-weight: 600;
    background-color: #f5f5f7;
    padding: 8px 12px;
    border-radius: 8px;
    &:focus {
      outline: none;
    }
  }
  h3 {
    margin-top: 48px;
    font-size: 26px;
    padding-bottom: 12px;
    border-bottom: 1px solid hsla(0, 0%, 50.2%, 0.18);
  }
  .right.eswitch {
    display: flex;
    justify-content: end;
    display: flex;
    justify-content: end;
  }
  .el-switch {
    margin-top: 6px;
    .el-switch__input,
    .el-switch__core {
      width: 52px !important;
      height: 32px;
      border-radius: 8px;
      padding: 6px;
      border-right: solid 7px rgb(19, 206, 102);
      border-left: solid 6px rgb(19, 206, 102);
    }
    .el-switch__core::after {
      width: 19px;
      height: 19px;
      top: 5px;
      border-radius: 6px;
    }
  }
  .footer {
    display: flex;
    margin-top: 96px;
  }
}
</style>
